<!-- 分类的选项卡组件 -->
 <template>
  <div>
    <el-tabs
      v-model="activeName"
      stretch="true"
      type="border-card"
      @tab-click="tabClick"
    >
      <el-tab-pane
        v-for="(item, index) in titles"
        :key="index"
        :label="item.title"
        :name="item.tname"
        class="tabpane"
      >
        {{ item.title }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";

export default {
  props: {
    titles: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      activeName: "", // 选中的标签页的name
    });
    onMounted(() => {
      state.activeName = props.titles[0].tname; // 页面一加载时，默认选中第一个标签页
    });
    const tabClick = (tab, event) => {
      emit("tabClick", tab, event); // tab对象中有一些参数, index, name, label
    };

    return {
      ...toRefs(state),
      tabClick,
    };
  },
};
</script>

<style scoped></style>
